<template>
  <div id="Tables">
      <button type="bottom" id="add" @click="add()">新增</button>
    <table stripe="true">
      <thead>
        <tr>
            <th width="200">id</th>
            <th>姓名</th>
            <th width="60">班级</th>
            <th width="160">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tables" :key="index" :class="'tr-color-' + index % 2">
          <td>{{ item.id }}</td>
          <td :class="{ dels: item.dels }">{{ item.name }}</td>
          <td>{{ item.class_id | classFile(select_list)}}</td>

          <td>
            <button class="graduation" @click="stop(item.id)" :disabled="item.dels">毕业</button>
            <button class="updata" @click="edit(item)" :disabled="item.dels">编辑</button>
            <button class="delete" @click="del(index)" :disabled="item.dels">删除</button>
          </td>
        </tr>
      </tbody>

    </table>
    <!-- 弹出模态框 -->
    <div id="mtk" v-show="flag">
            <div class="mask">
              <div class="mask_head">
                <span class="mask_head_title">编辑</span>
                <span class="mask_head_btn"  @click="flag=false">x</span>
              </div>
              <div class="mask_body">
                <div class="body_item">
                    <label>姓名</label>
                    <input type="text" v-model="formList.name">
                </div>
                <div class="body_items">
                  <label>班级</label>
                    <select  id="gred" v-model="formList.class_id">
                     <option v-for="(item,index) in select_list" :value="item.id" :key="index">
                       {{item.classlis}}
                      </option>
                  </select>
                </div>
                <div class="mask_foot">
                    <button class="btn2" @click="flag=false">取消</button>
                    <button class="btn1" @click="submit()">提交</button>
                </div>
               
              </div>
               
            </div>
       </div>
    
  </div>

</template>

<script>
export default {
  name: "Tables",
  props: {
    tables: {
      required: true,
    },
     select_list: {
       default: [],
      required: true,
    },
    formList:{
      default:{}
    },
     isEdit: {
      default: false,
    },
  
  },
  data(){
    return {
      id:'',
      name:'',
      class_id:'',
      dels:false,
      flag:false
    }
  },
    filters: {
    classFile(val, datas) {
      const result = datas.findIndex((item) => item.id === val);
      return datas[result].classlis;
    },
  },
  methods: {
     add(){
           this.flag=true;
            //给父组件传值,第一个是方法,第二个是传的输入框input的值
           this.isEdit = false
           this.formList.name='';
           this.formList.class_id='';
          
        },
    del(index){
      this.$emit('dele',index);
    },
    stop(id){
      this.$emit('stop',id);
    },
    edit(item){
      console.log(item);
      
        this.flag=true;
       
        this.$emit('edit',item);
       
        this.isEdit = true
    },
   submit(){
     if(this.isEdit===false){
            this.$emit('add',this.formList.id,this.formList.name,this.formList.class_id);
            this.formList.name='';
            this.formList.class_id='';
            this.flag=false;
     }else if(this.isEdit===true){
       this.$emit('submits',this.formList.id,this.formList.name,this.formList.class_id);
        this.flag=false;
        this.formList.name='';
        this.formList.class_id='';
     }
      
    },
   
  },
  
 }
</script>
<style scoped>
.tr-color-0 {
        background: #f8f8f8;
    }
tr:hover{
   background:#f0f0f0
}
td,th {
  border: 1px solid rgb(151, 150, 150);
  width: 200px;
  line-height: 40px;
  text-align: center;
}
table {
  margin-top: 10px;
  border: 1px solid black;
  border-collapse: collapse;
}
#add{
    width: 40px;
    height: 25px;
    background-color: rgb(85, 207, 238);
    border: none;
}
.dels {
  text-decoration: line-through;
}
.updata{
    width: 40px;
    height: 30px;
    background-color: rgb(85, 207, 238);
    border: none;
    margin-right: 5px;
}
.delete{
    width: 40px;
    height: 30px;
    background-color: rgb(238, 45, 31);
    border: none;
    
}
.graduation{
    width: 40px;
    height: 30px;
    background-color: rgb(28, 236, 150);
    border: none;
    margin-right: 5px;
}
#mtk{
    position: fixed; /* 根据浏览器定位 */
    z-index: 1; /* 放在顶部 */
    left: 0;
    top: 0;
    width: 100%; /* 全宽 */
    height: 100%; /* 全高 */
    overflow: auto; /* 允许滚动 */
    background-color: rgba(0,0,0,0.6); /* 背景色 */
}
.mask{
    display: flex; /*采用flexbox布局*/
    flex-direction: column; /*垂直排列*/
    position: relative;
    margin: 15% auto ;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
    box-sizing: border-box;
    width: 30%;
}
.mask_head{
  padding: 20px 20px 10px;
}
.mask_head_title{
    line-height: 24px;
    font-size: 18px;
    color: #303133;
}
.mask_head_btn{
  position: absolute;
    top: 20px;
    right: 20px;
    padding: 0;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 16px;
}
.mask_body{
  padding: 30px 20px;
    color: #606266;
    margin-left: 50px;
    font-size: 14px;
    word-break: break-all;
}
.body_item{
      margin-bottom: 22px;
}

input,#gred{
    margin: 5px;
    text-indent: 5px;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #dce0e6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: none;
    padding: 0 15px;
    width: 80%;
    cursor: pointer;
}
input:hover{
   border: 1px solid rgb(196, 194, 199);
}
#gred:hover{
  border: 1px solid rgb(196, 194, 199);
}
.btn1,.btn2{
    display: inline-block;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    text-align: center;
    box-sizing: border-box;
    margin-left: 10px;
    font-weight: 500;
    padding: 10px 15px;
    font-size: 14px;
    border-radius: 4px;
}
.btn1{
  color: #fff;
  background-color: rgb(32, 174, 240);
}
.mask .mask_foot{
  text-align: right;
     margin-top: 40px;
}
</style>
